<breadcrumb></breadcrumb>

<mat-card>
  <section>
    <h2>Receive email update</h2>
    <p>Showing a toggle to manage whether receive email update.</p>
    <mat-slide-toggle color="primary" [(ngModel)]="emailToggle">
      Receive email update
    </mat-slide-toggle>
  </section>

  <section>
    <h2>Music</h2>
    <p>Showing a disabled toggle to control music on/off status.</p>
    <mat-slide-toggle color="accent" [disabled]="true" [(ngModel)]="musicToggle">
      Music {{musicToggle ? 'on' : 'off'}} (disabled)
    </mat-slide-toggle>
  </section>

  <section>
    <h2>Terms and conditions</h2>
    <p>Showing a required toggle to accept terms and conditions in a form.</p>
    <form #form="ngForm" (ngSubmit)="onFormSubmit()" ngNativeValidate>
      <mat-slide-toggle name="termsToggle" required ngModel>
        I agree to terms and conditions
      </mat-slide-toggle>
      <p>
        <button mat-raised-button type="submit">Submit</button>
      </p>
    </form>
  </section>
</mat-card>